<%--
  Created by IntelliJ IDEA.
  User: nicebaby
  Date: 2018-11-28
  Time: 12:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>前台营业</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"></jsp:include>
    <script>
        function searcha() {
            //返回表格的 Options。
            var opts = $("#roletb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var name = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/vips/selvip",{'name':name,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#roletb").bootstrapTable('load',data) ;
            })
        }
        function searcha1() {
            $("#vipinfo").show();
            searcha();
        }
        function sou(){
            $("#fuwu").hide();
            $("#shangpin").hide();
            var xiaofei = $('[name=xiaofei]:checked').val();
            if(xiaofei==1){
                //服务
                $("#fuwu").show();
                //返回表格的 Options。
                var opts = $("#fuwutb").bootstrapTable("getOptions") ;
                var limit = opts.pageSize ;
                var offset = (opts.pageNumber-1) * limit;
                var name = $("#cha").val() ;
                $.post("${pageContext.request.contextPath}/vips/selvip",{'name':name,'limit':limit,'offset':offset},function (data) {
                    // var mydata = eval("("+data+")") ;
                    //重新绑定表格数据
                    $("#fuwutb").bootstrapTable('load',data) ;
                })
            }else if(xiaofei==2){
                //商品
                $("#shangpin").show();
                //返回表格的 Options。
                var opts = $("#shangpintb").bootstrapTable("getOptions") ;
                var limit = opts.pageSize ;
                var offset = (opts.pageNumber-1) * limit;
                var name = $("#cha").val() ;
                $.post("${pageContext.request.contextPath}/shangp/querySearch",{'spname':name,'limit':limit,'offset':offset},function (data) {
                    // var mydata = eval("("+data+")") ;
                    //重新绑定表格数据
                    $("#shangpintb").bootstrapTable('load',data) ;
                })
            }else{
                //已有几次
                $("#yyjc").show();
                //返回表格的 Options。
                var opts = $("#yyjctb").bootstrapTable("getOptions") ;
                var limit = opts.pageSize ;
                var offset = (opts.pageNumber-1) * limit;
                var name = $("#cha").val() ;
                $.post("${pageContext.request.contextPath}/shangp/querySearch",{'spname':name,'limit':limit,'offset':offset},function (data) {
                    // var mydata = eval("("+data+")") ;
                    //重新绑定表格数据
                    $("#yyjctb").bootstrapTable('load',data) ;
                })
            }
        }

        function dengjichaxun(){
            var vid = $('[name=vid]').html();
            $.post("${pageContext.request.contextPath}/shuaka/query",{'vid':vid},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#dengtb").bootstrapTable('load',data) ;
            })
        }
        $(function () {
            $('[name=xiaofei]').click(function () {
                $("#fuwu").hide();
                $("#shangpin").hide();
                $("#yyjc").hide();
            });
            $("#roletb").on("dbl-click-row.bs.table",function (e,row,ele) {
                $('[name=huiyuan_Name]').html(row.huiyuan_Name);
                $('[name=phone]').html(row.phone);
                $('[name=huiyuanleixing_Name]').html(row.huiyuanleixing_Name);
                $('[name=jiaru_DateTime]').html(row.jiaru_DateTime);
                $('[name=kanei_JinE]').html(row.kanei_JinE);
                $('[name=daoqi_DateTime]').html(row.daoqi_DateTime);
                $('[name=ssdp]').html(row.dianpu_Name);
                $("#dpid").val(row.dpid);
                $('[name=vdaotime]').html(row.vdaotime);
                $('[name=vjl]').html(row.ygname);
                $('[name=huiyuan_Jifen]').html(row.huiyuan_Jifen);
                $("#username").val(row.vname);
                $('[name=ljsk]').html(row.ljsk);
                $('[name=huiyuan_Id]').html(row.huiyuan_Id);
                $("#vipinfo").hide();
                dengjichaxun();
            })
            $("#shangpintb").on("dbl-click-row.bs.table",function (e,row,ele) {
                var jinglei = "";
                jinglei += "<tr><td>"+row.shangpin_Name+"</td>\n" +
                    "            <td>商品</td>\n" +
                    "            <td>"+row.chanpindanwei_Name+"</td>\n" +
                    "            <td>"+row.shangpin_Shoujia+"</td>\n" +
                    "            <td>1</td>\n" +
                    "            <td>"+row.shangpin_Shoujia+"</td>\n" +
                    "            <td><button class=\"btn  btn-primary\" id=\"remove\" onclick=\"remove()\">删除</button></td></tr>\n";
                $("#fwsptb").append(jinglei);
                $("#shangpin").hide();
            })
            $("#fuwutb").on("dbl-click-row.bs.table",function (e,row,ele) {
                var jinglei = "";
                jinglei += "<tr><td>"+row.fuwu_Name+"</td>\n" +
                    "            <td>服务</td>\n" +
                    "            <td>"+row.fuwuxiangmu_Name+"</td>\n" +
                    "            <td>"+row.fuwu_Shoujia+"</td>\n" +
                    "            <td>1</td>\n" +
                    "            <td>"+row.fuwu_Shoujia+"</td>\n" +
                    "            <td><button class=\"btn  btn-primary\" id=\"remove\" onclick=\"remove()\">删除</button></td></tr>\n";
                $("#fwsptb").append(jinglei);
                $("#fuwu").hide();
            })
            $("#roletb").bootstrapTable({
                url:'${pageContext.request.contextPath}/huiyuan/chax',
                //设置每页多少条数据
                pageSize:6,
                pageList:[6,8,10],
                height:500,
                pageNumber:1,
                rowStyle: function (row, index) {
                    var style = {};
                    style={css:{'font-size':'12px'}};
                    return style;
                },
                height:300,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                //sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        name:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'huiyuan_Id',
                        title:'会员编号',
                    },
                    {
                        field:'huiyuan_Name',
                        title:'会员姓名'
                    },
                    {
                        field:'huiyuanleixing_Name',
                        title:'会员类型'
                    },
                    {
                        field:'huiyuan_Xingbie',
                        title:'会员性别'
                    },
                    {
                        field:'phone',
                        title:'联系电话'
                    },
                    {
                        field:'dianpu_Name',
                        title:'开卡店铺'
                    },
                ]
            }) ;
            $("#dengtb").bootstrapTable({
                url:'${pageContext.request.contextPath}/shuaka/query?vid=0',
                //设置每页多少条数据
                pageSize:6,
                pageList:[6,8,10],
                height:500,
                pageNumber:1,
                rowStyle: function (row, index) {
                    var style = {};
                    style={css:{'font-size':'12px'}};
                    return style;
                },
                height:300,
                columns:[
                    {
                        field:'skid',
                        title:'序号',
                        align:'center',
                    },
                    {
                        field:'sktime',
                        title:'登记时间',
                        align:'center',
                    },
                ]
            }) ;
            $("#fuwutb").bootstrapTable({
                url:'${pageContext.request.contextPath}/fuwu/query',
                //设置每页多少条数据
                pageSize:6,
                pageList:[6,8,10],
                height:500,
                pageNumber:1,
                rowStyle: function (row, index) {
                    var style = {};
                    style={css:{'font-size':'12px'}};
                    return style;
                },
                height:300,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
               // sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        name:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'fuwu_Id',
                        title:'编码',
                        align:'center',
                    },
                    {
                        field:'fuwu_Name',
                        title:'名称',
                        align:'center',
                    },
                    {
                        field:'fuwuxiangmu_Name',
                        title:'分类',
                        align:'center',
                    },
                    {
                        field:'fuwu_Shoujia',
                        title:'价格',
                        align:'center',
                    },
                ]
            }) ;
                $("#shangpintb").bootstrapTable({
                url:'${pageContext.request.contextPath}/chanpin/chan',
                //设置每页多少条数据
                pageSize:6,
                pageList:[6,8,10],
                height:500,
                pageNumber:1,
                rowStyle: function (row, index) {
                    var style = {};
                    style={css:{'font-size':'12px'}};
                    return style;
                },
                height:300,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                //sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        spname:$("#cha").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'shangpin_Id',
                        title:'编码',
                        align:'center',
                    },
                    {
                        field:'shangpin_Name',
                        title:'名称',
                        align:'center',
                    },
                    {
                        field:'shangpinFenlei_Name',
                        title:'分类',
                        align:'center',
                    },
                    {
                        field:'chanpindanwei_Name',
                        title:'单位',
                        align:'center',
                    },
                    {
                        field:'shangpin_Shoujia',
                        title:'价格',
                        align:'center',
                    },
                    {
                        field:'shangpin_ShuLiang',
                        title:'剩余次数',
                        align:'center',
                    }
                ]
            }) ;
            // // 表格编辑
            // $("#fwsptb").on('click','td', function( e ){
            //     if ( $(this).find('input').length ) {
            //         return ;
            //     }
            //     var input = $("<input type='text' size='5' />")
            //         .val( $(this).text() );
            //     $(this).empty().append( input );
            // });

            // 结账时修改优惠金额，进行计算
            $("[name=yhjine]").on('input',function(e){
                var qian = $("#xfjine").html();
                var yhjine = $(this).val();
                var zongcount = parseInt(qian)-parseInt(yhjine);
                if(zongcount<0){
                    $(this).val(0)
                }else if(yhjine==""){
                    $("#ysjine").html(qian);
                } else{
                    $("#ysjine").html(zongcount);
                }
            });
        }) ;
        function remove(){
            $("#remove").parent().parent().remove();
        }
        function dengji(){
            var vid = $("[name=vid]").html();
            var vname = $("[name=vname]").html();
            var ssdp = $("#dpid").val();
            var skcishu = $('[name=ljsk]').html();
            var sktype;
            if(skcishu==0){
                sktype = "开卡登记";
            }else{
                sktype = "刷卡登记";
            }
            $.post("${pageContext.request.contextPath}/shuaka/add",{'vid':vid,'vname':vname,'skdp':1,'ssdp':ssdp,'sktype':sktype},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $.post("${pageContext.request.contextPath}/vips/sk",{'vid':vid},function (data) {
                    var ljsk = $('[name=ljsk]').html();
                    $('[name=ljsk]').html(parseInt(ljsk)+1);
                    searcha();
                })
                dengjichaxun();
            })
        }

        function jiezhang(){
            $("#jzmodel").modal("show");
            var zong = 0;
            $("#fwsptb").find("tr").each(function () {
                //第一列单元格的值eq(索引)
                if($(this).children('td:eq(0)').text()!="")
                {
                    var xiaozong = $(this).children('td:eq(5)').text();
                    zong+=parseInt(xiaozong);
                }
            });
            $("#xfjine").html(zong);
            // $("[name=yhjine]").val();
            $("#ysjine").html(zong);
            // xfdpid,vid,vname,dptid,xfje,xfjf,ssje,profit,fkfs,dhao,bzxx,czid
        }
        var danhao;
        $(function() {
            $.post("${pageContext.request.contextPath}/XiaoFeiTable/dhao",function (data) {
                $("#danhao1").val(data);
                danhao = $("#danhao1").val();
            })
        })


        function jiezhangle(){
            var yonghuId = $("[name=huiyuan_Id]").html();
            var vname = $("[name=vname]").html();
            var ssdp = $("#dpid").val();
            var xiaofeijine = $("#xfjine").html();
            var shishoujine = $("#ysjine").html();
            var jzfs = $('[name=jzfs]').val();
            var beizhu = $("[name=beizhu]").val();

            // 获取单号"
            //添加记录
            //添加详情
            //修改积分
            //修改库存
            $.post("${pageContext.request.contextPath}/XiaoFeiTable/tianjia",{'yonghuId':yonghuId,'xiaofeijine':xiaofeijine,'shishoujine':shishoujine,'danhao':danhao,'beizhu':beizhu},function (data) {
                if (data!=null){
                    alert("添加成功")
                } else {
                    alert("添加失败")
                }
                $("#fwsptb").find("tr").each(function () {
                    //第一列单元格的值eq(索引)
                    $(this).children('td').remove();
                    $("#jzmodel").modal("hide");
                });
                // $("#fwsptb").children().not(0).remove();
            })
            $("#fwsptb").find("tr").each(function () {
                //第一列单元格的值eq(索引)
                if($(this).children('td:eq(0)').text()!="")
                {
                    var type = $(this).children('td:eq(1)').text();
                    var name1 = $(this).children('td:eq(0)').text();
                    var count = $(this).children('td:eq(4)').text();


                    // `vname`,`type`,`name`,`tcid`,`yj`,`sj`,`count`,`zongjia`,`xfsj`
                    //添加套餐续费详情表
                    $.post("${pageContext.request.contextPath}/XiaoFeiMXTable/tianjia",{"shangpinName":name1,"leixing":type,"jiage":xiaofeijine,"shuliang":count,"huiyuan_Id":yonghuId,"xiaofeitableDanhao":danhao},function (data) {
                        // $("#fwsptb").children().not(0).remove();
                    })

                }
            });
        }


    </script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">

            <div class="col-sm-8 left">
                <form  class="form-inline pull-left">
                    <input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha1()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;</button>
                </form>
                <div  class="col-sm-12 left" style="background-color: #F5F5F5;height: 91px;">
                    <div class="row" style="height: 30px;line-height: 30px;">
                        <div class="col-sm-3">
                            会员姓名：<span name="huiyuan_Name"></span>
                        </div>
                        <div class="col-sm-3">
                            会员编号：<span name="huiyuan_Id"></span>
                        </div>
                        <div class="col-sm-3">
                            联系方式：<span name="phone"></span>
                        </div>
                        <div class="col-sm-3">
                            会员类型：<span name="huiyuanleixing_Name"></span>
                        </div>
                    </div>
                    <div class="row" style="height: 30px;line-height: 30px;">
                        <div class="col-sm-3">
                            开卡日期：<span name="jiaru_DateTime"></span>
                        </div>
                        <div class="col-sm-3">
                            卡内余额：<span name="kanei_JinE"></span>
                        </div>
                        <div class="col-sm-3">
                            会员积分：<span name="huiyuan_Jifen"></span>
                        </div>
                    </div>

                    <div class="row" style="height: 30px;line-height: 30px;">
                        <div class="col-sm-3">
                            <input type="hidden" id="dpid" />
                            开卡店铺：<span name="ssdp"></span>
                        </div>
                        <div class="col-sm-3">
                            到期日期：<span name="daoqi_DateTime"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="vipinfo" style="border:3px solid #F5F5F5;left: 230px; top: 55px; width: 700px; display: none; position: absolute; z-index: 99999; background-color: white">
            <table class="table table-striped" id="roletb"></table>
        </div>
    </div>
</div>
<div>
    <ul id="myTab" class="nav nav-tabs">

        <%--<li class="dropdown">--%>
            <%--<a href="#" id="myTabDrop1" class="dropdown-toggle"--%>
               <%--data-toggle="dropdown">Java <b class="caret"></b>--%>
            <%--</a>--%>
            <%--<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">--%>
                <%--<li><a href="#jmeter" tabindex="-1" data-toggle="tab">--%>
                    <%--充值</a>--%>
                <%--</li>--%>
                <%--<li><a href="#ejb" tabindex="-1" data-toggle="tab">--%>
                    <%--积分</a>--%>
                <%--</li>--%>
            <%--</ul>--%>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content" style="font-size: 14px;font-weight: bold;">
        <div class="tab-pane fade in active" id="home">
            <div class="row">
                <div class="row" style="height: 50px;background-color: #F5F5F5">
                    <div class="col-lg-3" style="margin-top:8px;margin-left: 40px;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="col-lg-5" style="line-height: 50px;">
                        <div class="row">会员消费：
                            <div class="radio-inline">
                                <input style="margin-top: 18px;" type="radio" name="xiaofei"  value="1" checked="checked" style="margin-top: 2px">
                                服务
                            </div>
                            <div class="radio-inline">
                                <input style="margin-top: 18px;" type="radio" name="xiaofei" value="2" style="margin-top: 2px">
                                商品
                            </div>
                            <input type="text" style="width: 150px;height: 25px;margin-right: 10px" id="cha"/><span class="glyphicon glyphicon-search" id="sou" onclick="sou()"></span>
                        </div>
                    </div>
                    <div class="col-lg-3" style="margin-top:8px;margin-left: 40px;">
                        <input type="button" class="btn btn-primary" onclick="jiezhang()" name="jiezhang" value="结账"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <table class="table table-striped" id="fwsptb">
                        <tr>
                            <th>项目名称</th>
                            <th>类型</th>
                            <th>单位</th>
                            <th>现价</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th>操作</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="ios">
            <p>iOS is a mobile operating system developed and distributed by Apple
                Inc. Originally released in 2007 for the iPhone, iPod Touch, and
                Apple TV. iOS is derived from OS X, with which it shares the
                Darwin foundation. iOS is Apple's mobile version of the
                OS X operating system used on Apple computers.</p>
        </div>
        <div class="tab-pane fade" id="jmeter">
            <p>jMeter is an Open Source testing software. It is 100% pure
                Java application for load and performance testing.</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans (EJB) is a development architecture
                for building highly scalable and robust enterprise level
                applications to be deployed on J2EE compliant
                Application Server such as JBOSS, Web Logic etc.
            </p>
        </div>
    </div>


    <!--结账模态框-->
    <div class="modal inmodal" id="jzmodel">
        <div class="modal-dialog">
            <form class="form-horizontal" id="userform" action="" method="post" role="form">
                <div class="modal-content animated bounceInRight">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">账单结算</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="hidden" name="xfdhao"/>
                            <label class="col-sm-4 text-right" for="username">消费金额：</label>
                            <div class="col-sm-6">
                                <span id="xfjine"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="vcfwzk" class="col-sm-4 text-right">优惠金额：</label>
                            <div class="col-sm-6">
                                <input type="number" class="form-control" name="yhjine"  />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="vcspzk" class="col-sm-4 text-right">应收金额：</label>
                            <div class="col-sm-6">
                                <span id="ysjine"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dpid" class="col-sm-4 text-right">可用店铺：</label>
                            <div class="col-sm-6">
                                <select class="form-control" name="jzfs">
                                    <option value="现金">现金</option>
                                    <option value="储值卡">储值卡</option>
                                    <option value="微信">微信</option>
                                    <option value="支付宝">支付宝</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="vcfwzk" class="col-sm-4 text-right">备注：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="beizhu"  />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="jiezhangle()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(function () {
            $('#myTab li:eq(0) a').tab('show');
        });
    </script>
    <div id="fuwu" style="border:3px solid #F5F5F5;left: 655px; top: 268px; width: 700px; display: none; position: absolute; z-index: 99999; background-color: white">
        <table class="table table-striped" id="fuwutb"></table>
    </div>
    <div id="shangpin" style="border:3px solid #F5F5F5;left: 655px; top: 268px; width: 700px; display: none; position: absolute; z-index: 99999; background-color: white">
        <table class="table table-striped" id="shangpintb"></table>
    </div>
    <div id="yyjc" style="border:3px solid #F5F5F5;left: 655px; top: 268px; width: 700px; display: none; position: absolute; z-index: 99999; background-color: white">
        <table class="table table-striped" id="yyjctb"></table>
    </div>
    <input type="text" id="danhao1" style="display: none">
</div>
</body>
</html>
